<template>
    <div>
      <my-head></my-head>

      <div style="background: whitesmoke;height: 100%">
        <el-button type="success" @click="findOrder(2)"  round>已支付</el-button>
        <el-button type="info" @click="findOrder(1)" round>未支付</el-button>
        <el-button type="warning"  @click="findOrder(4)" round>取消支付</el-button>
        <el-button type="danger" @click="findOrder(5)"  round>支付失败</el-button>
        <el-row style="width:90%;margin-left: 8%;margin-top: 5%;color: whitesmoke">
          <el-card >
            <el-col  style="margin-right: 10%;height: 50px;width: 10%;color:gray;size: 20px" >
              订单信息
            </el-col>
            <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
              单价(元)
            </el-col>
            <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
              实付金额(元)
            </el-col>
            <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
              交易状态
            </el-col>
            <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
              交易操作
            </el-col><br>
            <el-divider></el-divider>

            <el-col  v-for="order in orders" :label="order" :key="order.id" >
              <el-divider content-position="left" style="color: #c0ccda">订单id：{{order.orderid}}</el-divider>
              <el-col v-for="orderDetail in order.qfOrderDetailList" :label="orderDetail" :key="orderDetail.id" style="width: 60%">
                <el-col style="margin-right: 10%;width: 25%;">
                  <el-row><span style="font-size: 10px;color: #c0ccda">  子订单号:{{orderDetail.orderDetailId}}</span></el-row>
                  <el-row> {{orderDetail.qfCourse.courseName}}</el-row>
                </el-col>

                <el-col style="margin-right: 18%;height: 50px;width: 18%;color:gray;size: 20px">
                    <el-row>
                      {{orderDetail.qfCourse.pay}}
                    </el-row>
                </el-col>
                <el-col style="margin-right: 18%;height: 50px;width: 8%;color:gray;size: 20px">
                  <el-row>
                    {{orderDetail.qfCourse.pay}}
                  </el-row>
                </el-col>
                <br>
                <el-divider direction="vertical"></el-divider>
              </el-col>

              <el-col style="height: 50px;width: 25%;color:gray;size: 20px">

                <el-col style="margin-right: 45%;height: 50px;width: 35%;color:gray;size: 20px">
                  <el-row v-if="order.orderStatus==1">
                    未支付
                  </el-row>
                  <el-row v-if="order.orderStatus==2">
                    已支付
                  </el-row>
                  <el-row v-if="order.orderStatus==3">
                    正在支付
                  </el-row>
                  <el-row v-if="order.orderStatus==4">
                    取消支付
                  </el-row>
                  <el-row v-if="order.orderStatus==5">
                    支付失败
                  </el-row>
                </el-col>
                  <el-col style="margin-right: -29%;height: 50px;width: 40%;color:gray;size: 20px">
                    <el-row v-if="order.orderStatus==1">
                      <el-button type="warning" round @click="orderpay(order.orderid)" >立即支付</el-button>
                    </el-row>
                    <el-row v-if="order.orderStatus==4 || order.orderStatus==5">
                      <el-button type="warning" round @click="orderpay(order.orderid)">重新购买</el-button>
                    </el-row>
                    <el-row v-if="order.orderStatus==2">
                      <el-button type="success" round >支付完成</el-button>
                    </el-row>
                    <el-row v-if="order.orderStatus==3">
                      <el-button type="error" round @click="orderpay(order.orderid)">支付未完成</el-button>
                    </el-row>
                  </el-col>
              </el-col>
            </el-col>
          </el-card>
        </el-row>
      </div>

      <div v-html="alipayWap" ref="alipayWap"></div>

      <my-footer></my-footer>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "",
          data(){
            return{
              orders:[],
              alipayWap:'',

            }
        },
      methods:{
        findOrder:function (staus) {
          this.$axios.post("/qflive-order/order/findOrderByUserId",{orderstatus:staus}).then(res=>{
            if (res.data.code==1){
              this.orders=res.data.data;
            }
          })
        },
        orderpay(orderid){

          this.$axios.post("/qflive-pay/pay/alipay",{orderid:orderid}).then(res=>{
            //console.log()

            this.alipayWap = res.data.data;
            console.log(res.data.data)
            //前台发起请求
            this.$nextTick(() => {
              this.$refs.alipayWap.children[0].submit()
            })
          })
        }
      },
      mounted(){
          this.findOrder(2);
      }

    }
</script>

<style scoped>

</style>
